import 'antd/dist/antd.css';
import './App.css';
import { UnorderedListOutlined, SketchOutlined } from '@ant-design/icons'
import { Input, Menu, Row, Col, Button } from 'antd';
const { SubMenu } = Menu


function App() {
  return (
    <div className="App">
       <Row align="middle">
          <Col>
              <h1>
                <a id="logo" href="#">
                <img src="logo.svg" alt="logo" />
                  Ant Design
                </a>
              </h1>
          </Col>
          <Col flex={1} offset={1}>
              <div id="searchBox">
                <Input placeholder="搜索" />
              </div>
          </Col>
          <Col offset={1}>
              <Menu id="menu" mode="horizontal">
                <Menu.Item>设计</Menu.Item>
                <Menu.Item>文档</Menu.Item>
                <Menu.Item>组件</Menu.Item>
                <Menu.Item>资源</Menu.Item>
                <Menu.Item>国内镜像</Menu.Item>
                <SubMenu icon={<UnorderedListOutlined />}>
                  <Menu.Item>Github</Menu.Item>
                  <Menu.Item>English</Menu.Item>
                  <Menu.Item>RTL</Menu.Item>
                </SubMenu>
              </Menu>
          </Col>
       </Row>
       <Row justify="center">
         <div id="bigLogo">
          <img src="bigLogo.svg" alt="" />
          <SketchOutlined id="dot"/>
         </div>
       </Row>
       <Row justify="center">
         <div id="btns">
          <Button type="primary" shape="round" size="large">
            开始使用
          </Button>
          <Button shape="round" size="large">
            设计语言
          </Button>
         </div>
       </Row>
    </div>
  );
}

export default App;
